<template>
  <div>
    <v-nav :current="5" @changelang="changelang"></v-nav>
    <img src="@/components/yanfa.png" alt="" style="width: 100%">
    <h1>{{staticText[7]}}</h1>
    <div>
      <h2>{{yanfaList.chengguo[0]}}</h2>
      <p>{{yanfaList.chengguo[1]}}</p>
    </div>
    <h3>{{staticText[5]}}</h3>
    <div class="xp-bg">
      <div>
        <p v-for="(item, index) in lists.new" :key="index">{{item}}</p>
      </div>
    </div>
    <h3 v-if="false">{{staticText[6]}}</h3>
    <div class="tb" v-if="false">
      <div class="tab-head">
        <p>{{staticText[10]}}</p>
        <p>{{staticText[11]}}</p>
        <p>{{staticText[12]}}</p>
      </div>
      <div>
        <el-table
          :data="lists.up"
          stripe
          style="width: 100%;" class="spHight">
          <el-table-column
            prop="name"
            label="产品名称"
            style="width: 33.3%;"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="ind"
            label="适应症"
            style="width: 33.3%;"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="notes"
            label="产品优势"
            style="width: 33.3%;"
            align="center"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <h1>{{staticText[8]}}</h1>
    <div>
      <h2>{{yanfaList.pingtai[0]}}</h2>
      <p>{{yanfaList.pingtai[1]}}</p>
    </div>
    <div class="yf-bg">
      <div>
        <p v-for="(item, index) in lists.yf" :key="index"><img src="../assets/31.png" alt="" style="width: 15px;margin-right: 3px"><span style="font-weight: bold">{{item.title}}</span><span>{{item.title2}}</span></p>
      </div>
    </div>
    <h3>{{staticText[9]}}</h3>
    <div class="yftd">
      <img src="@/assets/y3.png" alt="">
    </div>
    <img src="@/assets/y4.png" alt="" class="yfsj" v-if="isShow">
    <img src="@/assets/y41.png" alt="" class="yfsj" v-if="!isShow">
    <h2>{{yanfaList.team[0]}}</h2>
    <p class="pd52">{{yanfaList.team[1]}}</p>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vNav from '@/components/nav/nav'
import vFooter from '@/components/footer'
import {mapGetters} from 'vuex'
import { getResearchData } from '@/services/api.js'
import { getResearchDataEn } from '@/services/api_en.js'
export default {
  data () {
    return {
      lists: [],
      isShow: true
    }
  },
  props: {
  },
  components: {
    vNav,
    vFooter
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'staticText': 'staticText',
      'yanfaList': 'yanfaList'
    })
  },
  methods: {
    _getChList () {
      console.log(1)
      getResearchData().then((res) => {
        console.log(res)
        this.lists = res
      })
    },
    _getEnList () {
      console.log(2)
      getResearchDataEn().then((res) => {
        console.log(res)
        this.lists = res
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isShow = true
      }
      if (this.lang === 2) {
        this._getEnList()
        this.isShow = false
      }
    },
    changelang (res) {
      if (res === 1) {
        this._getChList()
        this.isShow = true
      }
      if (res === 2) {
        this._getEnList()
        this.isShow = false
      }
    }
  },
  created () {
    this.version()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../util/common.scss';
h1 {
  padding: 36rem/$font-size-base 0;
  font-size: 30rem/$font-size-base;
  letter-spacing: 1px;
  color: #333;
  font-weight: normal;
  text-align: left;
  padding-left: 30rem/$font-size-base;
}
h2 {
  font-size: $baseFontSize;
  letter-spacing: 1px;
  color: #0051bb;
  font-weight: normal;
  margin-bottom: 29rem/$font-size-base;
  padding: 0 30rem/$font-size-base
}
p {
  font-size: $baseFontSize;
  letter-spacing: 1px;
  color: #4d4d4d;
  padding: 0 30rem/$font-size-base
}
h3 {
  font-size: 30rem/$font-size-base;
  letter-spacing: 3px;
  color: #0051bb;
  text-align: center;
  padding-top: 34rem/$font-size-base;
  padding-bottom: 31rem/$font-size-base
}
.xp-bg {
  // width: 750rem/$font-size-base;
  // height: 315rem/$font-size-base;
  padding: .3rem;
  background: url("http://btyyftp.gotoip3.com/m_dist/static/assets/y1.png") no-repeat center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    line-height: 48rem/$font-size-base;
    color: #fff;
  }
}
.yf-bg {
  // width: 750rem/$font-size-base;
  // height: 536rem/$font-size-base;
  padding: .3rem;
  background: url("http://btyyftp.gotoip3.com/m_dist/static/assets/y2.png") no-repeat center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: .2rem;
  p {
    line-height: 36rem/$font-size-base;
    color: rgba(77, 77, 77, 0.88);
    margin-bottom: .2rem
  }
}
.yftd {
  width: 100%;
  height: 400rem/$font-size-base;
  img {
    width: 100%;
    height: 100%
  }
}
.yfsj {
  display: block;
  width: 569rem/$font-size-base;
  height: 348rem/$font-size-base;
  margin: 0 auto;
  margin-top: 42rem/$font-size-base;
  margin-bottom: 79rem/$font-size-base;
}
.pd52 {
  padding-bottom: 52rem/$font-size-base;
}
</style>
